import { ref, reactive, onUnmounted, nextTick, watch } from 'vue'
import { getRealVh } from '@/utils/screen-scale'
import store from '@/store'

/**
 * 基础表格基础数据
 * @param query 查询的基本字段项，去赋值给响应式
 * @param autoGetTableHeight 是否自动获取表格高度，这种情况只适用于表格页面静态高度固定
 * @param getTableDataFn 表格数据获取方法
 * 处理主要表格页面外，其他不需要的时候请设置为false,以减少事件计算
 * **/
export const useTableCommonData = ({ query = {}, autoGetTableHeight = true, getTableDataFn }) => {
  // 表格实例
  const tableRef = ref(null)
  const tableData = ref([]) // 表格数据
  const currentPage = ref(1) // 表格分页参数：当前页码
  const pageSize = ref(30) // 当前一页显示条数
  const pageSizes = ref([30, 50, 100]) // 页码列表
  const total = ref(0) // 当前条数
  const tableHeight = ref(200) // 表格的高度
  const queryForm = ref({}) // // 表格查询绑定数据
  const queryFormSubmit = ref({}) // 表格查询提交数据
  const selectedRows = reactive(new Map())

  const queryE = { ...query }
  /**
   * 表格高度设置
   * @param staticHeight 静态高度 75：顶部高度 20 app-main的下上10px 40 app-content的padding 20
   * 42 查询表格高度 42 操作按钮高度 32 底部分页高度
   * @param dynamicElement 动态元素高度
   * **/
  const setTbHeight = (staticHeight = 75 + 20 + 40 + 42 + 42 + 32, dynamicElement) => {
    const setHeight = () => {
      // const h1 = document.documentElement.clientHeight - 1
      const h1 = getRealVh() - 1
      let dynamicElementHeight = 0
      if (dynamicElement) {
        dynamicElementHeight = document.querySelector(dynamicElement).offsetHeight
      }
      const h = h1 - dynamicElementHeight - staticHeight
      tableHeight.value = h < 200 ? 200 : h
    }
    nextTick(setHeight)
    watch(() => store.getters.windowScale, () => {
      setHeight()
    })
    window.addEventListener('resize', setHeight)
    onUnmounted(() => {
      window.removeEventListener('resize', setHeight)
    })
  }

  if (query) {
    queryForm.value = { ...query }
    queryFormSubmit.value = { ...query }
  }
  if (autoGetTableHeight) setTbHeight()

  const handleSearch = () => {
    currentPage.value = 1
    queryFormSubmit.value = { ...queryForm.value }
    getTableDataFn()
  }
  // 重置表格
  const handleReset = () => {
    queryForm.value = { ...queryE }
    handleSearch()
  }
  // 页码大小改变
  const handleSizeChange = (size) => {
    pageSize.value = size
    currentPage.value = 1
    getTableDataFn()
  }
  // 当前页面改变
  const handleCurrentChange = () => {
    getTableDataFn()
  }
  // 刷新当前页面数据
  const handleRefresh = () => {
    tableData.value = []
    getTableDataFn()
  }
  // 点击行
  const handleRowClick = row => {
    tableRef.value.toggleRowSelection(row, !selectedRows.has(row.fid))
    handleSelect(undefined, row)
  }
  // 选中行
  const handleSelect = (selection, row) => {
    selectedRows.has(row.fid) ? selectedRows.delete(row.fid) : selectedRows.set(row.fid, row)
  }
  // 全选
  const handleSelectAll = (selection) => {
    selectedRows.clear()
    selection.forEach((row) => {
      selectedRows.set(row.fid, row)
    })
  }
  return {
    tableHeight,
    tableData,
    currentPage,
    pageSize,
    pageSizes,
    total,
    queryForm,
    queryFormSubmit,
    selectedRows,
    tableRef,
    setTbHeight,
    handleSearch,
    handleReset,
    handleSizeChange,
    handleCurrentChange,
    handleRefresh,
    handleRowClick,
    handleSelect,
    handleSelectAll
  }
}
